//  ==============================渲染文章类别下拉框=============================
const form = layui.form
axios.get('/my/article/cates').then(({ data: { data } }) => {
  const htmlStr = data.map(ele => {
    const { Id, name } = ele
    // 将option的value值设置为Id,因为后端需要根据Id来知道前端选择了哪个选项
    return `<option value="${Id}">${name}</option>`
  }).join('')
  // 为了不覆盖掉原本存在的“所有分类”选项所以使用append方法
  $('[name="cate_id"]').append(htmlStr)
  //刷新select选择框渲染
  // https://www.ilayuis.com/doc/modules/form.html#render
  form.render('select')
})

// =============================添加富文本编辑器=========================
const E = window.wangEditor
const editor = new E('#contentBox')
editor.config.zIndex = 1
editor.create()

// ===============================设置封面图片裁切区域===========================
// 取裁剪区域的 DOM 元素
let $image = $(".container img");
//配置选项
let options = {
  // 纵横比
  aspectRatio: 400 / 280,
  // 指定预览区域
  preview: ".preview",
}
//创建裁剪区域
$image.cropper(options)


// ============================模拟点击文件域选择文件========================
// 点击选择图片按钮时模拟点击文件域（文本域是隐藏的，用户不需要看到）
$('#btnChooseCoverImage').on('click', function () {
  $('#fileCover').click()
})


// ===========================更换图片重新设置裁切区域========================
/* 在做图片上传功能时，给input绑定了change事件，第一次点击input框时，
在打开的文件选择框里点击取消按钮，不会触发change事件。但是当已经上传了图片，
再次点击input，在文件选择弹窗里，点击取消按钮，会再次触发input的change事件。 */
const layer = layui.layer
// 当选择的文件变更时触发change事件
$('#fileCover').on('change', function () {
  // 使用DOM对象文件域的files属性获取到图片文件对象数组，再用下标获取其中元素
  const imgFile = this.files[0]
  // 用户点击了文件域但是最终未选择文件，imgFile的值是undefined，使用下方转链接的方法会报错
  // 所以先判断如果未选择文件就return，后续代码不执行并提示用户

  // 此处也可以判断文件域的value是否为空，this.files的长度是否为0
  // 如果需要选择同一个文件之后，还会再触发change事件的解决办法是在文件上传成功后，把input的value清空。
  if (!imgFile) return layer.msg('未选择图片')
  // 将图片文件对象转成url链接
  const imgSrc = URL.createObjectURL(imgFile)
  $image
    // 销毁旧的裁剪区域
    .cropper('destroy')
    // 重新设置图片路径
    .attr('src', imgSrc)
    // 重新初始化裁剪区域
    .cropper(options)
})


// ========================= 决定文章发布状态====================
let state
$('#btnPublish').click(function () {
  state = '已发布'
})
$('#btnSave').click(function () {
  state = '草稿'
})

// ===========================发布文章========================

$('#form').on('submit', function (e) {
  e.preventDefault()
  // 接口要求使用formdata格式数据
  const fd = new FormData(this)
  // content是接口需要的参数名，editor.txt.html()是wangEditor提供的获取html方法
  fd.append('content', editor.txt.html())
  fd.append('state', state)
  // 处理封面数据
  $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob(function (blob) {
      // 将 Canvas 画布上的内容，转化为文件对象
      // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
      fd.append('cover_img', blob)
      axios.post('/my/article/add', fd).then(({ data: { status, message } }) => {
        if (status !== 0) return layer.msg(message)
        layer.msg(message, {
          icon: 1,
          time: 1500 
        }, function () {
          location.href='/article/art_list.html'
        })
      })
      // fd.forEach((value, name) => { console.log(value, name) })
    })
})


